<template>
	<view class="container" :data-theme="theme">

		<view class="container_header">
			<!-- <u-tag text="查看历史记录" type="warning" icon="info-circle" size="large" @click="historyClick"></u-tag> -->
			<uni-notice-bar show-get-more text="查看历史记录" @click="historyClick" />
		</view>
		<view class="form_box">
			<u-form :model="uploadProductData" ref="uForm" :rules="rules">

				<u-form-item label="商品名称" prop="productName" label-width="80px">
					<u--input v-model="uploadProductData.productName" placeholder="请输入商品名称" />
				</u-form-item>
				<u-form-item label="商品价格" prop="productPrice" label-width="80px">
					<u--input type="number" v-model="uploadProductData.productPrice" placeholder="请输入商品价格" />
				</u-form-item>
				<u-form-item label="渠道" prop="productChannelDisplay" label-width="80px" borderBottom
					@click="channelShow = true">
					<u--input v-model="uploadProductData.productChannelDisplay" disabled disabledColor="#ffffff"
						placeholder="请选择渠道" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="图片上传" label-width="80px">
					<u-upload :fileList="imageList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</u-form-item>
				<u-form-item label="备注" prop="postscript" label-width="80px">
					<textarea class="textarea" placeholder-style="color:#ccc" placeholder="可输入内容" />
				</u-form-item>
				<view class="content_footer">
					<button type="primary" class="plain_bgColor" @click="uploadClick">价格上传</button>
				</view>
			</u-form>
			<u-action-sheet :show="channelShow" :actions="channelList" title="请选择渠道" @close="channelClose"
				@select="selectChannel">
			</u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	import {
		uploadProductApi
	} from "@/api/bagPrice.js"
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				uploadProductData: {
					productPrice: '', //商品价格
					productName: '', // 商品名称
					productPicture: '', // 商品图片
					productChannel: "", //商品渠道
					productChannelDisplay: '', //显示的值
					postscript: '', //备注

				},
				rules: {
					productPrice: [{
						required: true,
						message: '请输入商品价格',
						trigger: ['blur']
					}],
					productName: [{
						required: true,
						message: '请输入商品名称',
						trigger: ['blur']
					}],
					productChannelDisplay: [{

						required: true,
						message: '请输入商品渠道',
						trigger: ['change']
					}],


				},
				// 展示渠道
				channelShow: false,
				// 渠道选择
				channelList: [{
						name: '多多买菜',
						value: 1
					},
					{
						name: '美团买菜',
						value: 2
					},
					{
						name: '美菜',
						value: 3
					}
				],
				// 文件列表
				imageList1: [],
				channelIndex: 0,
			}
		},
		onLoad() {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},

		methods: {
			// 选择渠道
			selectChannel(event) {
				this.uploadProductData.productChannelDisplay = event.name
				this.uploadProductData.productChannel = event.value
			},

			// 选择渠道关闭事件
			channelClose() {
				this.channelShow = false
			},
			// 上传价格的点击事件
			uploadClick() {
				let that = this
				this.$refs.uForm.validate().then(res => {
					if (this.uploadProductData.productPicture != '') {
						uni.showModal({
							title: '提示',
							content: '确认上传吗？',
							showCancel: true,
							confirmText: '确定',
							success: async (res) => {
								if (res.confirm) {
									await that.uploadProduct()
									that.imageList1 = []
									that.$refs.uForm.resetFields()
									uni.navigateTo({
										url: '/pages/bagPrice/history/history',

									});
								} else if (res.cancel) {
									this.$util.Tips({
										title: '已取消操作'
									})
								}
							}
						});
					} else {
						uni.$u.toast('请您上传图片')
					}


				}).catch(errors => {
					uni.$u.toast('请您正确填写信息')
				})
			},
			// 删除图片
			deletePic(event) {
				this.imageList1.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`imageList${event.name}`].length
				lists.map((item) => {
					this[`imageList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					if (result == null) {
						uni.showToast({
							title: "上传失败",
							icon: "none",
						})
						this.deletePic(event.index, 1);
						break;
					}
					let newStatus = {
						status: 'success',
						message: '上传成功',
						url: result,
					}
					let regex = /^(?:https?:\/\/)?[^/]+\/([^/]+)/;
					this.uploadProductData.productPicture = result.replace(
						regex, "$1")
					let item = this[`imageList${event.name}`][fileListLen]
					this[`imageList${event.name}`].splice(fileListLen, 1, Object.assign(item, newStatus))
					fileListLen++
				}
			},
			uploadFilePromise(filePath) {
				return this.$util.uploadFilePromise(filePath, {
					url: 'upload/image',
					name: "multipart", //固定 multipart
					model: "product", //模块 用户user,商品product,微信wechat,news文章
					pid: 1, //分类ID 0编辑器,1商品图片,2拼团图片,3砍价图片,4秒杀图片,5文章图片,6组合数据图,7前台用户,8微信系列
					count: 1
				});
			},
			// 商户上传或修改产品
			async uploadProduct() {

				try {
					let result = await uploadProductApi(this.uploadProductData)

				} catch (e) {
					//TODO handle the exception

					console.log()
				}
			},

			// 查看历史记录
			historyClick() {
				uni.navigateTo({
					url: '/pages/bagPrice/history/history',

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 下拉框样式
	select option[disabled]:checked {
		color: #aaa;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
		margin: 10px;
		height: 32px;
		font-weight: bold;
		line-height: 32px;
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;

		.container_header {
			padding: 10px;
			display: flex;
			justify-content: flex-end;
		}

		.form_box {
			padding: 10px;
			background-color: white;
			margin: 10px;
			border-radius: 10px;

			.textarea {
				width: 95%;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #f5f5f5;
			}

			.content_footer {
				margin-top: 20rpx;
				padding-bottom: 10rpx;
			}
		}
	}
</style>